<template>
  <div>
    <div style="height:200px">
      <slider ref="slider" :pages="sliderList" :sliderinit="sliderInit">
        <div slot="loading">
          <div class="loadingDot">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </slider>
    </div>
    <p class="community-recommend-text">推荐社区</p>
    <div class="community-recommend">
      <slider ref="slider" :pages="multipleSliderList" :sliderinit="multipleSliderInit">
        <div slot="loading">
          <div class="loadingDot">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </slider>
    </div>
  </div>
</template>
<script>
import slider from 'vue-concise-slider'
// import img1 from '@/assets/images/b1.png'
// import img2 from '@/assets/images/b2.png'
export default {
  name: 'Community',
  components: {
    slider
  },
  data () {
    return {
      sliderList: [{
        html: '<div class="slide1">slide1</div>',
        style: {
          'background': '#1bbc9b'
        }
      }, {
        html: 'slide2',
        style: {
          'background': '#4bbfc3'
        }
      }, {
        html: 'slide3',
        style: {
          'background': '#7baabe'
        }
      }],
      sliderInit: {
        currentPage: 1,
        tracking: false,
        thresholdDistance: 100,
        thresholdTime: 300,
        loop: true,
        autoplay: 5000
      },
      multipleSliderList: [
        {
          html: 'slide1',
          style: {
            'background': '#1bbc9b',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide2',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide3',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide4',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide5',
          style: {
            'background': '#1bbc9b',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide6',
          style: {
            'background': '#4bbfc3',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide7',
          style: {
            'background': '#7baabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        },
        {
          html: 'slide8',
          style: {
            'background': '#7caabe',
            'width': '23.5%',
            'margin-right': '2%'
          }
        }
      ],
      multipleSliderInit: {
        currentPage: 0,
        tracking: false,
        thresholdDistance: 100,
        thresholdTime: 300,
        infinite: 4,
        slidesToScroll: 4,
        loop: true,
        autoplay: 3000
      }
    }
  },
  mounted () {
    // 隐藏推荐社区分页
    document.querySelectorAll('.slider-pagination')[1].style.display = 'none'
  }
}
</script>
<style lang="stylus" scoped>
  .community-recommend
    height (150/12)rem
  .slider-pagination-bullets
    display none !important
  .community-recommend-text
    font-size (18/12)rem
</style>
